<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('操作日志列表')"/>
	<th:block th:include="include :: bootstrap-select-css"/>
</head>
<body class="gray-bg">
<div class="container-div">
	<div class="row">
		<div class="col-sm-12 search-collapse">
			<form id="operlog-form">
				<div class="select-list">
					<ul>
						<li>
							<label>系统模块： </label><input type="text" name="title"/>
						</li>
						<li>
							<label>操作人员： </label><input type="text" name="operName"/>
						</li>
						<!--							<li class="select-selectpicker">-->
						<!--								<label>操作类型： </label><select id="businessTypes" th:with="type=${@dict.getType('sys_oper_type')}" class="selectpicker" data-none-selected-text="请选择" multiple>-->
						<!--									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>-->
						<!--								</select>-->
						<!--							</li>-->
						<!--							<li>-->
						<!--								<label>操作状态：</label><select name="status" th:with="type=${@dict.getType('sys_common_status')}">-->
						<!--									<option value="">所有</option>-->
						<!--									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>-->
						<!--								</select>-->
						<!--							</li>-->
						<li class="select-time">
							<label>操作时间： </label>
							<input type="text" class="time-input" id="startTime" placeholder="开始时间"
							       name="params[beginTime]"/>
							<span>-</span>
							<input type="text" class="time-input" id="endTime" placeholder="结束时间"
							       name="params[endTime]"/>
						</li>
						<li>
							<a class="btn btn-primary btn-rounded btn-sm" onclick="searchPre()"><i
									class="fa fa-search"></i>&nbsp;搜索</a>
							<a class="btn btn-warning btn-rounded btn-sm" onclick="resetPre()"><i
									class="fa fa-refresh"></i>&nbsp;重置</a>
						</li>
					</ul>
				</div>
			</form>
		</div>

		<div class="btn-group-sm" id="toolbar" role="group">
			<a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()">
				<i class="fa fa-remove"></i> 删除
			</a>
			<a class="btn btn-primary single disabled">
				<i class="fa fa-edit"></i> 修改
			</a>
			<a class="btn btn-danger" onclick="$.operate.clean()">
				<i class="fa fa-trash"></i> 清空
			</a>
			<a class="btn btn-primary" onclick="$.table.destroy()">
				<i class="fa fa-edit"></i> 销毁
			</a>
			<a class="btn btn-warning" onclick="$.table.exportExcel()">
				<i class="fa fa-download"></i> 导出
			</a>
			<a class="btn btn-success">
				<i class="fa fa-plus"></i> 新增
			</a>
			<a class="btn btn-success" onclick="$.table.showColumn('operLocation')">
				<i class="fa fa-check"></i> 显示操作地点
			</a>
			<a class="btn btn-danger" onclick="$.table.hideColumn('operLocation')">
				<i class="fa fa-close"></i> 隐藏操作地点
			</a>
			<a class="btn btn-info" onclick="selectColumns()">
				<i class="fa fa-search"></i> 获取选中信息
			</a>
			<a class="btn btn-warning" onclick="$.table.refresh()">
				<i class="fa fa-refresh"></i> 刷新
			</a>
			<a class="btn btn-primary" onclick="selectFirstColumns()">
				<i class="fa fa-search"></i> 获取选中首列值
			</a>
		</div>

		<div class="col-sm-12 select-table table-striped">
			<table id="bootstrap-table" data-mobile-responsive="true"></table>
		</div>
	</div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-select-js"/>
<script th:inline="javascript">
    var prefix = ctx + "page";

    $(function () {
        var options = {
            url: prefix + "/listOper",
            cleanUrl: prefix + "/clean",
            detailUrl: prefix + "/detail/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            sortName: "operTime",
            sortOrder: "desc",
            modalName: "操作日志",
            escape: true, // 转义html 防止sql 注入
            showPageGo: true,
            rememberSelected: true,
            striped: true, // 是否行间变色
            showFooter: true, //下栏综合
            // showToggel: false,
            // showSearch: false, // 搜索框
            // showRefresh: false, //刷新框
            showExport: true,
            clickToSelect: true, //点击栏选中
            // fixedColumns: true, //冻结左侧列
            // fixedNumber: 2, //冻结列数
            // rightFixedColumns: true, //冻结右侧列
            // rightFixedNumber: 1, //冻结列数
            rowStyle: rowStyle,
            // search: true,
            // queryParams: queryParams, //自定义初始化参数
            columns: [{
                field: 'state',
                checkbox: true
            },
                // {
                //     title: "序号",
                //     formatter: function (value, row, index) {
                //         return $.table.serialNumber(index);
                //     } // 会影响选中获取信息操作 一般没啥用
                // },
                {
                    field: 'operId',
                    title: '日志编号',
                    sortable: true
                },
                {
                    field: 'title',
                    title: '系统模块'
                },
                {
                    field: 'businessType',
                    title: '操作类型',
                    align: 'center',
                    // formatter: function(value, row, index) {
                    // 	return $.table.selectDictLabel(datas, value);
                    // }
                },
                {
                    field: 'operName',
                    title: '操作人员',
                    sortable: true,
                    footerFormatter: function (value) {
                        var tag = 0;
                        for (var i in value) {
                            if (value[i].operName == 'admin') { //遍历获取值  和 footerFormatter
                                tag = tag + 1;
                            }
                        }
                        return "总操作次数: " + tag;
                    }
                },
                {
                    field: 'deptName',
                    title: '部门名称'
                },
                {
                    field: 'operIp',
                    title: '主机',
                    formatter: function(value, row, index) {
                        console.log(value);
                        return $.table.tooltip(value); //浮动值  可指定长度
                    }
                },
                {
                    field: 'operLocation',
                    title: '操作地点'
                },
                {
                    field: 'status',
                    title: '操作状态',
                    align: 'center',
                    formatter: function (value, row, index) {
                        if (value == 0) {
                            return '<span class="badge badge-primary">成功</span>';
                        } else if (value == 1) {
                            return '<span class="badge badge-danger">失败</span>';
                        }
                    }
                },
                {
                    field: 'operTime',
                    title: '操作时间',
                    sortable: true
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="$.operate.detail()"><i class="fa fa-info"></i>详细</a>');
                        actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs"  href="javascript:void(0)"><i class="fa fa-remove"></i>删除</a>');
                        // return $.table.dropdownToggle(actions.join('')); // 定义下拉框
                        return actions.join('');
                    }
                }
            ]
        };
        $.table.init(options);
    });

    function searchPre() {
        var data = {};
        // data.businessTypes = $.common.join($('#businessTypes').selectpicker('val'));
        $.table.search('operlog-form', 'bootstrap-table', data);
    }

    function resetPre() {
        $.form.reset();
        $("#businessTypes").selectpicker('refresh');
    }

    function queryParams(params) {
        var search = $.table.queryParams(params);
        console.log(search);
        // search.title = "代码生成";
        return search;
    }

    function rowStyle(row, index) {
        var style = {css: {'color': 'green'}};
        return style;
    }

    function selectColumns() {
        var column = $.table.selectColumns('operId'); //有无重复值
        alert(column);
    }

    function selectFirstColumns() {  //没有使用序号时 一般主键放在第一列
        var column = $.table.selectFirstColumns();
        alert(column);
    }
</script>
</body>
</html>